<template>
  <PageWrapper :title="getTitle" contentFullHeight fixedHeight contentBackground>
    <div class="relative !h-full w-full overflow-hidden" ref="el"> </div>
  </PageWrapper>
</template>


<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, watchEffect, watch, unref, nextTick, computed } from 'vue';
  import { useDebounceFn } from '@vueuse/core';
  import { useAppStore } from '/@/store/modules/app';
  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
  import CodeMirror from 'codemirror';
  import { PageWrapper } from '/@/components/Page';
  import { logDetail } from './task.api';
  import { useRouter } from 'vue-router';
  import { useMessage } from '/@/hooks/web/useMessage';
  // css
  import '@/components/CodeEditor/src/codemirror/codemirror.css';
  import 'codemirror/theme/idea.css';
  import 'codemirror/theme/material-palenight.css';
  // modes
  import 'codemirror/mode/javascript/javascript';
  import 'codemirror/mode/css/css';
  import 'codemirror/mode/htmlmixed/htmlmixed';
  import "codemirror/mode/xml/xml"; // xml编辑器模式

  const { currentRoute } = useRouter();
  const route = unref(currentRoute);
  const { createMessage: $message } = useMessage();

  const el = ref();

  let editor: Nullable<CodeMirror.Editor>;

  const appStore = useAppStore();

  const flowId = route.query.flowId;
  const flowName = route.query.flowName;
  const taskId = route.query.taskId;
  //设置标题
  const getTitle = computed(() => flowName? flowName+'-日志':'日志');

  onMounted(async () => {
    await nextTick();
    init();
    // useWindowSizeFn(debounceRefresh);
  });

  onUnmounted(() => {
    editor = null;
  });

  watch(
    () => appStore.getDarkMode,
    async () => {
      setTheme();
    },
    {
      immediate: true,
    }
  );

  // 插入数据  by wangjie 2021-02-05 begin
  // focusIndex代表插入数据后光标所在的位置,例如(|)光标在括号中间则需要传1
  function insert(info: any, focusIndex = 0){
    console.log('wang-insert', info);
    const doc = editor?.getDoc();
    var cursor = doc?.getCursor(); // gets the line number in the cursor position
    var line = doc?.getLine(cursor.line); // get the line contents
    var pos = { // create a new object to avoid mutation of the original selection
        line: cursor.line,
        ch: line.length - 1 // set the character position to the end of the line
    }
    doc?.replaceRange(info+'\n', pos); // adds a new line
    editor?.focus(); 
  }
  // 插入数据  by wangjie 2021-02-05 end

  function setTheme() {
    unref(editor)?.setOption('theme', appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight');
  }

  async function init() {
    const addonOptions = {
      autoCloseBrackets: true,
      autoCloseTags: true,
      foldGutter: true,
      gutters: ['CodeMirror-linenumbers'],
    };

    editor = CodeMirror(el.value!, {
      value: '',
      mode: 'application/json',
      readOnly: true,
      tabSize: 2,
      theme: 'material-palenight',
      lineWrapping: true,
      lineNumbers: true,
      ...addonOptions,
    });
    setTheme();
    loadLog();
  }

  async function loadLog(){
    const {success, data, msg} = await logDetail({
      id: flowId,
      taskId: taskId,
    });
    if(success){
      let content = '';
      data.forEach(item => {
        insert(item.text, 1);
      });
      console.log('wnag-loadLog',content);
    }else{
      $message.error(msg);
    }
  }
 
</script>